<template>
  <div class="messageWrap">
    <el-button type="warning" @click="clearAll">清空全部消息</el-button>
    <div class="message" @click="clear(index)" v-if="!message.hasRead"  v-for="(message,index) in messages" :key="index">
      <span class="userFrom">{{message.userFrom}}</span>
      回复了您的
      <span class="type">{{message.type==1?'帖子':'评论'}}</span>
      <span class="source">{{message.source}}</span>
      <span class="time">{{message.time}}</span>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
    export default {
        name: "Messages",
        data() {
            return {
              messages:[],
              messagesTest:[
                {
                  postId:1,// 帖子的id
                  noticeId:1,// 通知的id
                  userFrom:"淼酱1号",
                  type:1,// 1是帖子，2是评论，
                  source:'不要麻烦了不要麻烦了',//帖子的标题或者评论的内容
                  time:'2017-09-07 11.22.23',//具体的时间，带上时分秒，
                  hasRead:false //是否已读
                },
                {
                  userFrom:"淼酱1号",
                  type:2,// 1是帖子，2是评论，
                  source:'不要麻烦了不要麻烦了',//帖子的标题或者评论的内容
                  time:'2017-09-07 11.22.23',//具体的时间，带上时分秒，
                  hasRead:false //是否已读
                },
                {
                  userFrom:"淼酱1号",
                  type:1,// 1是帖子，2是评论，
                  source:'不要麻烦了不要麻烦了',//帖子的标题或者评论的内容
                  time:'2017-09-07 11.22.23',//具体的时间，带上时分秒，
                  hasRead:false //是否已读
                },
              ]
            }
        },
        computed:{
          ...mapState(["accountName","avatar","token"]),
        },
        methods: {
          clear(index){
            this.messages[index].hasRead=true;
            this.$axios({
              url:'http://47.92.167.153:8085/community/index',
              method:'post',
              data:{
                data:{
                  noticeId:this.messages[index].noticeId
                },
                token:this.token
              }
            }).then((res)=>{
              res=res.data;
              if(res.success){
                console.log("success");
              }
            }).catch(function(error){
              console.log(error)
            });
            this.$router.push({
              name:'CommunityDetails',   //跳转的路径
              params:{           //路由传参时push和query搭配使用 ，作用时传递参数
                id:this.messages[index].postId,
              }
            });
          },
          clearAll(){
            this.messages.forEach(item=>{
              item.hasRead=true;
            })
          },
        },
        mounted() {
          this.messages=this.messagesTest;
        }
    }
</script>

<style scoped lang="stylus">
  .messageWrap
    .el-button
      line-height: 0.6
      margin-bottom 20px
    .message
      border-left: 6px solid #009786
      height: 50px
      padding: 15px 20px
      box-sizing: border-box
      background #EFEFEF
      margin-bottom 20px
      cursor pointer
      >span
        font-size 16px
      .userFrom
        color  #8FBDD4
      .source
        color  #8FBDD4
      .time
        font-size 13px
        float right
        color #8888
</style>
